import { PureComponent } from "react";
import { Flex } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, getMDrawerFullHeight } from "../../../utils/helper"
import MDrawer from "../../MDrawer/MDrawer"
interface Props {
	value: any,
	onChange: Function,
	label?: string,
	required?: any,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: string,
	label_width?: any,
	list: any[],
	hasError: boolean,
	errorMsg: string,
	value_datatype?: string,
	label_text_color?: string,
	label_text_align?: any
}
interface State {
	value: any,
	open: boolean,
	selectMoreValue: any
}
export default class MySelectContacts extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value,
		open: false,
		selectMoreValue: ""
	}
	onOpenChange = () => {
		this.setState({ open: !this.state.open });
	};
	handleCancel = () => {
		this.onOpenChange()
	};
	handleOk = () => {
		this.changeValue(this.state.selectMoreValue);
		this.onOpenChange()
	};
	selectMoreItemClick = (item) => {
		let { selectMoreValue } = this.state;
		let { code } = item;
		let newValue = "";
		if (isNull(selectMoreValue)) {
			newValue = code + "";
		}
		else {
			let n = "," + selectMoreValue + ",";
			if (n.indexOf("," + code + ",") != -1) {
				newValue = n.replace("," + code + ",", ",");
			}
			else {
				newValue = n + code + ","
			}
			newValue = newValue.substring(1);
			newValue = newValue.substring(0, newValue.length - 1);
		}
		if (isNull(newValue)) {
			newValue = undefined
		}
		this.setState({
			selectMoreValue: newValue
		})
	};
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		this.changeValue(value);
	};
	deleteItem = (item) => {
		let { value } = this.state;
		value = "," + value + ",";
		let { code } = item;
		code = "," + code + ",";
		value = value.replace(code, ",");
		value = value.substring(1);
		value = value.substring(0, value.length - 1);
		this.onChange(value);
	}
	render() {
		let { label, required, disabled, readonly, show_label, tips, label_width = 5, list, hasError, errorMsg, value_datatype = "string", label_text_color, label_text_align = "left" } = this.props;
		let isNumber = value_datatype == "number";
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value, open, selectMoreValue } = this.state;
		let valueList = [];
		if (!isNull(value) && list.length > 0) {
			let newVal = "," + value + ",";
			list.map(item => {
				let { code } = item;
				if (isNumber) {
					code = Number(code);
				}
				if (newVal.indexOf("," + code + ",") != -1) {
					valueList.push(item);
				}
			})
		}
		if (list && list.length > 0) {
			list = list.map(i => {
				return {
					...i,
					label: i.name,
					value: i.code
				}
			})
		}

		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div data-flex="dir:left box:first" style={{ paddingRight: '15px' }}>
					<div style={{ width: "15px", lineHeight: "40px" }}>
						{
							isRequired && <p style={{ color: "#f5222d", fontSize: "14px", textAlign: "center", fontFamily: "SimSun" }}>*</p>
						}
					</div>
					<div>
						{isShowLabel && <p style={{ lineHeight: "40px", fontSize: "16px", width: label_width * 17 + "px", textAlign: label_text_align, color: label_text_color }}>{label}:</p>}
						<Flex wrap="wrap" justify="start">
							{
								valueList.map(item => {
									let { code, name, url } = item;
									return (
										<div key={code} data-flex="dir:top main:center cross:center" style={{ margin: "0 20px 10px 0", textAlign: "center", position: 'relative' }}>
											{
												!isDisabled ? <div onClick={() => {
													this.deleteItem(item)
												}}>
													<img src="image/close.png" style={{ background: "#fff", borderRadius: "50%", border: 0, width: "16px", height: "16px", position: 'absolute', right: 0, top: 0 }} alt="" />
												</div> : null
											}
											{
												!isNull(url) ? <img src={url} alt="" style={{ width: "50px" }} /> :
													<div style={{ width: "50px", height: "50px", backgroundColor: "#1890ff", borderRadius: '50%', lineHeight: "50px", textAlign: "center", color: "#fff", fontSize: "22px" }}>{name.toString().substring(0, 1)}</div>
											}
											<p style={{ marginTop: "5px" }}>{item.name}</p>
										</div>
									)
								})
							}
							{
								!isDisabled ? <div data-flex="dir:top main:center" style={{ width: "50px", margin: "0 20px 10px 0", textAlign: "center" }} onClick={() => {
									if (isNull(list) || list.length == 0) {
										MToast.info("暂无数据", 2, null, false)
									}
									else {
										this.setState({
											selectMoreValue: value
										});
										this.onOpenChange();
									}
								}}>
									<img src="./image/add.png" alt="" style={{ width: "50px" }} />
									<p style={{ marginTop: "5px", visibility: "hidden" }}>1</p>
								</div> : null
							}
						</Flex>
						<div className={hasError ? "am-list-item am-input-error" : ""}>
							<div className="am-input-error-extra mi" onClick={(e) => {
								e.stopPropagation();
								MToast.info(errorMsg, 2, null, false)
							}}></div>
						</div>

						{tips && <p className="tipsStyle" style={{ margin: 0 }}>{tips}</p>}
					</div>
				</div>
				<MDrawer open={open} position="bottom" height={getMDrawerFullHeight} onOpenChange={() => {
					this.setState({
						open: !this.state.open
					})
				}}>
					<div className="am-picker-popup-header" >
						<div className="am-picker-popup-item am-picker-popup-header-left" onClick={this.handleCancel}>取消</div>
						<div className="am-picker-popup-item am-picker-popup-title">{label}</div>
						<div className="am-picker-popup-item am-picker-popup-header-right" onClick={this.handleOk}>确定</div>
					</div>
					<div style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }}>
						{
							list.map(item => {
								let { code, name, url, desc } = item;
								if (isNumber) {
									code = Number(code);
								}
								let img = "./image/check_box_multi_no.png";
								let isYes = false;
								if (!isNull(selectMoreValue)) {
									let newSelectMoreValue = "," + selectMoreValue + ",";
									if (newSelectMoreValue.indexOf("," + code + ",") != -1) {
										isYes = true;
									}
								}
								if (isYes) {
									img = "./image/check_box_multi_yes.png";
								}
								return (
									<div style={{ fontSize: "16px", height: "50px", padding: "0 10px", borderBottom: "1px solid #f7f7f7" }} data-flex="dir:left cross:center main:justify" key={code} onClick={() => {
										this.selectMoreItemClick(item)
									}}>
										<div data-flex="dir:left cross:center main:center">
											<img style={{
												width: '20px',
												height: "20px",
												marginRight: "10px"
											}} src={img} alt="" />
											{
												!isNull(url) ? <img src={url} alt="" style={{
													width: "40px",
													height: "40px",
													marginRight: "10px"
												}} />
													: <div style={{
														width: "40px",
														height: "40px",
														marginRight: "10px",
														backgroundColor: "#1890ff",
														borderRadius: '50%',
														lineHeight: "40px",
														textAlign: "center",
														color: "#fff",
														fontSize: "20px"
													}}>{name.toString().substring(0, 1)}</div>
											}
											<div>
												<p>{name}</p>
												<p style={{
													color: "#999",
													fontSize: "14px",
													marginTop: "2px"
												}}>{desc}</p>
											</div>
										</div>

									</div>
								)
							})
						}
					</div>
					<div></div>
				</MDrawer>
			</div>
		)
	}
}